import  React from 'react';
import {Routes, Route, Outlet} from 'react-router-dom'
import AuthRouter from './auth'
import Home from '@/components/home.js' //引入首页组件

// 引入每个目录下面的index.js文件
const ModulesFile = require.context('./',true,/index.js$/)

// 总路由集合
const RouterMap = []

//对引入的文件进行循环
ModulesFile.keys().reduce((modules, modulePath) => {

  // 路由模块名称   文件夹/index  user/index
  const ModuleName = modulePath.replace(/^.\/(.*)\.js/,'$1')

  //不包含当前index.js 文件
  if(ModuleName !== 'index')
  {
    //路由列表
    const ModuleList = ModulesFile(modulePath)

    //追加到数组
    RouterMap.push(...ModuleList.default)
  }

  return RouterMap
}, {})

const RouterList = () =>{
    return(
        <>
            <Routes>
                 {/*默认设置首页*/}
                <Route path="/" element={<Home/>}></Route> 

                <Route path="/" element={<><Outlet/></>}>
                    {
                        RouterMap.map((item, index) =>{
                            return (
                                 //   AuthRouter 校验用户是否登陆的组件 
                               <Route key={index} path={item.path} element={<AuthRouter auth={item.auth} component={<item.component/>}></AuthRouter>}>
                                {item.children && 
                                    item.children.map((child, indexs) =>
                                        <Route key={indexs} path={child.path} element={<AuthRouter auth={child.auth} component={<child.component/>}></AuthRouter>}></Route>
                                    )
                                }
                               </Route> 
                            )
                        })
                    }
                </Route>

            </Routes>
        </>
    )
}

export default RouterList